<template>
	<view class="page">
		<view class="header">
			<image src="../../static/img/whiteLight.png" mode="" class="header_bg"></image>
			<!-- <u-navbar title="会员中心" :autoBack="true" bgColor="transparent" leftIconColor="#fff"
				:titleStyle="{ color: '#FFF'}">
			</u-navbar> -->
			<uni-nav-bar @clickLeft="goBack"  title="会员中心" background-color="transparent" color="#fff"  :border="false" :statusBar="true" left-icon="left"></uni-nav-bar>
			<view class="member">
				<view class="member_left">
					<u-avatar :src="src" size="120rpx"></u-avatar>
					<view class="memberInfo">
						<view class="memberName">中煤北京煤矿机械中煤北京煤矿机械…</view>
						<view class="memberPhone">15910272876</view>
					</view>
				</view>
				<image src="../../static/img/svip.png" mode="" class="svip"></image>
			</view>
			<u-tabs :current="current" :list="tabList" @click="clickType"
				:inactiveStyle="{color: '#AAA5A2',fontSize:'32rpx'}"
				:activeStyle="{color: '#E4C5C0',fontWeight: '600',fontSize:'40rpx'}"></u-tabs>
		</view>
		<view class="member_main">
			<view class="main_header">
				<view class="">当前价格为<span>{{currentName}}</span>套餐</view>
				<view class="detailright">
					<text>服务详情</text>
					<image src="../../static/img/right.png" mode=""></image>
				</view>
			</view>
			<uni-swiper-dot :info="tabList" :current="current" mode="round"
				:dotsStyles="{backgroundColor:'#dddddd',border:'1px solid #dddddd',selectedBackgroundColor:'#F43107',selectedBorder:'1px solid #F43107',bottom:0}">
				<swiper class="swiper" :current="current" :autoplay="false" next-margin="-20px" @change="swiperChange">
					<swiper-item v-for="(item,index) in tabList" :key="index">
						<view class="swiperItem">
							<view class="packageItem" v-for="(newItem,newIndex) in item.details" :key="newIndex"
								:class="currentPackageId == newItem.id?'active':''"
								@click.stop="choosePackage(newItem)">
								<view class="attr">{{newItem.attr}}</view>
								<view class="price">￥{{newItem.price}}</view>
								<view class="old_price">￥{{newItem.old_price}}</view>
								<view class="tjItem">推荐</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
			<view class="payBox">
				<view class="payItem" :class="currentPay == 0?'activePay':''" @click="choosePay(0)">
					<image src="../../static/img/wx.png" mode=""></image>
					微信
					<image v-if="currentPay == 0" src="../../static/img/selectedPay.png" mode="" class="selectedPay">
					</image>
				</view>
				<view class="payItem" :class="currentPay == 1?'activePay':''" @click="choosePay(1)">
					<image src="../../static/img/zfb.png" mode=""></image>
					支付宝
					<image v-if="currentPay == 1" src="../../static/img/selectedPay.png" mode="" class="selectedPay">
					</image>
				</view>
				<view class="payItem" :class="currentPay == 2?'activePay':''" @click="choosePay(2)">
					<image src="../../static/img/dg.png" mode=""></image>
					对公打款
					<image v-if="currentPay == 2" src="../../static/img/selectedPay.png" mode="" class="selectedPay">
					</image>
				</view>
			</view>
			<view class="deduction">
				<u-search actionText="验证" shape="square" height="76rpx" bgColor="#fff" borderColor="#ddd"
					placeholder="请输入抵扣码"
					:actionStyle="{width:'140rpx',height:'80rpx',textAlign:'center',lineHeight:'80rpx',background: '#F43107',marginLeft:0,color:'#fff',fontSize:'28rpx',fontWeight:'400',borderRadius:'0 8rpx 8rpx 0'}"></u-search>
			</view>
			<view class="Payment">
				<span class="Payment_left">
					成功抵扣：¥{{deductionMoney}}元
				</span>
				<span class="Payment_right">
					<text>实付金额：</text>
					<span>￥2700.00</span>
				</span>
			</view>
		</view>
		<view class="member_footer">
			<view class="check">
				<u-checkbox-group activeColor="red" shape="circle" v-model="checkboxValue" placement="row" size="28rpx">
					<u-checkbox label=" " name=" ">
					</u-checkbox>
				</u-checkbox-group>
				<view class="agreement">
					阅读并同意 <span @click="goXy">《招标与采购网会员服务协议》</span>
				</view>
			</view>
			<view class="btn">立即开通</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				trueMoney: 0, //实付金额
				deductionMoney: 0, //抵扣金额
				checkboxValue: false,
				currentPay: 0, //选中的支付方式索引
				currentPackageId: 0, //选中的套餐id
				current: 0, //选中会员项的索引
				currentName: '', //选中会员的名称

				//数据列表
				tabList: [{
						name: '标准会员',
						details: [{
								id: 1,
								attr: '1年/人民币',
								price: '2800',
								old_price: '3500'
							},
							{
								id: 2,
								attr: '2年/人民币',
								price: '5000',
								old_price: '6000'
							},
							{
								id: 3,
								attr: '3年/人民币',
								price: '7000',
								old_price: '7500'
							},
						]
					},
					{
						name: '高级会员',
						details: [{
								id: 1,
								attr: '1年/人民币',
								price: '2800',
								old_price: '3500'
							},
							{
								id: 2,
								attr: '2年/人民币',
								price: '5000',
								old_price: '6000'
							},
							{
								id: 3,
								attr: '5年/人民币',
								price: '7000',
								old_price: '7500'
							},
						]
					},
					{
						name: 'VIP会员',
						details: [{
								id: 1,
								attr: '1年/人民币',
								price: '2800',
								old_price: '3500'
							},
							{
								id: 2,
								attr: '2年/人民币',
								price: '5000',
								old_price: '6000'
							},
							{
								id: 3,
								attr: '3年/人民币',
								price: '7000',
								old_price: '7500'
							},
						]
					},
					{
						name: '白金会员',
						details: [{
								id: 1,
								attr: '1年/人民币',
								price: '2800',
								old_price: '3500'
							},
							{
								id: 2,
								attr: '2年/人民币',
								price: '5000',
								old_price: '6000'
							},
							{
								id: 3,
								attr: '3年/人民币',
								price: '7000',
								old_price: '7500'
							},
						]
					},
					{
						name: '钻石会员',
						details: [{
								id: 1,
								attr: '1年/人民币',
								price: '2800',
								old_price: '3500'
							},
							{
								id: 2,
								attr: '2年/人民币',
								price: '5000',
								old_price: '6000'
							},
							{
								id: 3,
								attr: '3年/人民币',
								price: '7000',
								old_price: '7500'
							},
						]
					},
				]
			}
		},
		methods: {
			goXy(){
				uni.navigateTo({
					url:'/pages/xieyi/xieyi'
				})
			},
			goBack(){
				uni.navigateBack()
			},
			choosePay(e) {
				this.currentPay = e
				if(e == 2){
					uni.navigateTo({
						url:'/pages/CorporateInfo/CorporateInfo'
					})
				}
			},
			choosePackage(val) {
				this.currentPackageId = val.id
			},
			swiperChange(e) {
				// console.log(e);
				this.current = e.detail.current

			},
			clickType(item) {
				// console.log(item);
				this.current = item.index
				this.currentName = item.name
			},
		},
		mounted() {
			if (this.tabList.length > 0) {
				this.currentName = this.tabList[0].name
			}
			this.currentPackageId = this.tabList[0].details[0].id
			// console.log(this.packageList);
		}
	}
</script>

<style scoped lang="scss">
	.page {
		
		::v-deep .uni-nav-bar-text{
			font-size: 32rpx;
		}
		::v-deep .u-tabs__wrapper__nav__line {
			display: none;
		}

		::v-deep .uni-swiper__dots-item {
			width: 12rpx !important;
			height: 12rpx !important;
			margin-left: 8rpx !important;
		}

		::v-deep .uni-swiper__dots-long {
			width: 24rpx !important;
			height: 12rpx !important;
			border-radius: 40rpx !important;
		}

		::v-deep .u-search__content__icon {
			display: none;
		}

		::v-deep .u-search__content {
			border-radius: 8rpx 0 0 8rpx !important;
		}

		::v-deep .u-checkbox__icon-wrap {
			border: 4rpx solid #A9B1BE
		}


		min-height: 100vh;

		.member_footer {
			position: fixed;
			bottom: 68rpx;
			width: 750rpx;

			.check {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 20rpx;

				.agreement {
					font-weight: 400;
					font-size: 24rpx;
					color: #A9B1BE;

					span {
						text-decoration-line: underline;
						color: #3A7DEC;
					}
				}
			}

			.btn {
				margin: 0 auto;
				width: 690rpx;
				height: 88rpx;
				background: linear-gradient(90deg, #F43107 0%, #FF9289 50%, #F43107 100%);
				border-radius: 100rpx;
				text-align: center;
				line-height: 88rpx;
				font-weight: 600;
				font-size: 32rpx;
				color: #FFF4F0;
			}
		}

		.member_main {
			background-color: #fff;
			border-radius: 40rpx 40rpx 0rpx 0rpx;
			padding: 30rpx;
			transform: translateY(-30rpx);

			.Payment {
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				
				.Payment_left {
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					line-height: 42rpx;
				}

				.Payment_right {
					font-weight: 600;
					font-size: 28rpx;
					color: #333333;
					
					span {
						font-weight: bold;
						font-size: 44rpx;
						color: #FF4848;
					}
				}
			}

			.deduction {
				margin-top: 30rpx;
			}

			.payBox {
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.payItem {
					width: 210rpx;
					height: 80rpx;
					background: #FFFFFF;
					border-radius: 8rpx;
					border: 1px solid #DDDDDD;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					position: relative;

					image {
						width: 36rpx;
						height: 36rpx;
						margin-right: 8rpx;
					}

					.selectedPay {
						width: 40rpx;
						height: 40rpx;
						position: absolute;
						right: 0;
						bottom: -2rpx;
						margin-right: 0;
					}
				}

				.activePay {
					background: #FEFAF2;
					border: 1px solid #F5D3A3
				}
			}

			.swiper {
				.swiperItem {
					width: 690rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.packageItem {
						padding-top: 60rpx;
						width: 210rpx;
						height: 260rpx;
						background: #FFFFFF;
						border-radius: 16rpx;
						border: 1px solid #DDDDDD;
						display: flex;
						flex-direction: column;
						align-items: center;
						position: relative;

						.attr {
							font-weight: 600;
							font-size: 28rpx;
							color: #333333;
						}

						.price {
							margin-top: 12rpx;
							font-weight: bold;
							font-size: 44rpx;
							color: #FF4848;
						}

						.old_price {
							margin-top: 10rpx;
							font-weight: 400;
							font-size: 28rpx;
							color: #A9B1BE;
							text-decoration: line-through;
						}

						.tjItem {
							width: 84rpx;
							height: 40rpx;
							background: #FF4848;
							border-radius: 16rpx 0rpx 16rpx 0rpx;
							position: absolute;
							left: 0;
							top: 0;
							font-weight: 400;
							font-size: 20rpx;
							color: #FFFFFF;
							text-align: center;
							line-height: 40rpx;
							transform: translate(-2rpx,-2rpx);
						}
					}

					.active {
						background: #FEFAF2;
						border: 1px solid #F5D3A3;
					}
				}
			}

			.main_header {
				margin-bottom: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-weight: 400;
				font-size: 28rpx;
				color: #47342E;

				span {
					font-weight: 600;
					color: #F43107;
				}

				.detailright {
					display: flex;
					align-items: center;

					text {
						height: 26rpx;
						line-height: 26rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
					}

					image {
						width: 16rpx;
						height: 26rpx;
						margin-left: 10rpx;
					}
				}
			}
		}

		.header {
			width: 750rpx;
			height: 440rpx;
			background-color: #2a211c;
			position: relative;

			.header_bg {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
			}

			.member {
				// margin-top: 196rpx;
				margin-bottom: 8rpx;
				padding: 0 30rpx;
				// background-color: red;
				display: flex;
				justify-content: space-between;

				.member_left {
					display: flex;

					.memberInfo {
						margin-left: 18rpx;
						padding-top: 12rpx;

						.memberName {
							max-width: 288rpx;
							font-weight: 400;
							font-size: 32rpx;
							color: #FFFFFF;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}

						.memberPhone {
							margin-top: 12rpx;
							font-weight: 400;
							font-size: 28rpx;
							color: #A9B1BE;
						}
					}
				}

				.svip {
					width: 120rpx;
					height: 40rpx;
				}
			}
		}

	}
</style>